<template>
  <div class="TotalBox">
    <div class="topBox add_btn_top">
      <div class="switch-text" :style="{ color: switchTextColor }">
        {{ switchText }}
      </div>
      <el-switch
        v-model="screen"
        v-permission="[4, 'switch']"
        active-color="#2680D2"
        class="screenSwitch"
        @change="openScrenn"
      />
      <div class="line" />
      <el-button
        v-permission="[1, 'button']"
        type="primary"
        class="addButton"
        size="mini"
        @click="openadd"
        ><i class="el-icon-plus" />添加
      </el-button>
    </div>

    <add-device-type :adddevicetype="adddevicetype" @changeShow="showAdd" />

    <div class="display_search">
      <div v-permission="[4, 'list']" class="box-left">
        <div v-init-screen-h>
          <div v-if="deviceTypeData && deviceTypeData.length > 0">
            <el-row :gutter="20">
              <el-col
                v-for="(typeList, typeindex) in deviceTypeData"
                :key="typeindex"
                :xs="24"
                :sm="12"
                :md="12"
                :lg="lgNum"
                :xl="6"
                class="mb_sm"
              >
                <ImgTitleContent
                  :item="typeList"
                  @handNavTo="ToDeviceTypeDetails(typeList.token)"
                />
              </el-col>
            </el-row>
          </div>
          <empty-data v-if="deviceTypeData && deviceTypeData.length == 0" />
        </div>
        <Pagination
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          :page-sizes.sync="pageSizes"
          @pagination="pagination"
        />
      </div>
      <div v-show="screenShow" class="searchForm">
        <div class="select">筛选</div>
        <div class="">
          <div class="searchText">名称</div>
          <el-input
            v-model="searchname"
            class="inputStyle"
            clearable
            size="mini"
            placeholder="输入关键字搜索"
          />
        </div>
        <div class="">
          <div class="searchText">Token</div>
          <el-input
            v-model="searchtoken"
            class="inputStyle"
            size="mini"
            placeholder="输入关键字搜索"
          />
        </div>
        <div class="">
          <div class="searchText">日期:</div>
          <el-date-picker
            class="w100 "
            v-model="dateArr"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            align="right"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '00:00:00']"
            size="mini"
          >
          </el-date-picker>
          <!-- <div class="inputStyle inputStyle_date" style="display: flex">
            
            <el-date-picker
              v-model="startDate"
              size="mini"
              placeholder="开始日期"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
            <i class="el-icon-right" style="color: rgba(0, 0, 0, 0.25)" />
            <el-date-picker
              v-model="endDate"
              size="mini"
              placeholder="结束日期"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </div> -->
        </div>
        <div class="bottomBtn">
          <el-button class="reset" size="mini" style="width: 50%" @click="reSet"
            >重置</el-button
          >
          <el-button
            class="submit"
            size="mini"
            style="width: 50%"
            type="primary"
            @click="submitBut"
            >提交</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from "@/views/common/page";
import "../../../assets/style/deviceCss/commonStyle.css";
import "../../../assets/style/deviceCss/filterWindow.css";
import AddDeviceType from "./AddDeviceType.vue";
import emptyData from "@/views/common/emptyData";
import ImgTitleContent from "@/components/ImgTitleContent";
import { getDeviceTypesV2 } from "@/api/deviceType";
export default {
  components: { ImgTitleContent, AddDeviceType, Pagination, emptyData },
  data() {
    return {
      dateArr: [],
      switchTextColor: "#666666",
      switchText: "显示筛选",
      labelPosition: "top",
      screen: false,
      screenShow: false,
      pageNum: 1,
      pageSize: 20,
      pageSizes: [20, 50, 100, 300],
      total: 0,
      params: {},
      deviceTypeData: [],
      deviceTypeDataSearch: [],
      searchtype: "",
      searchname: "",
      searchtoken: "",
      searchdate: "",
      adddevicetype: false,
      deviceData: [],
      startDate: "",
      endDate: "",
      lgNum: 6
    };
  },
  // 创建完成时
  created() {},
  mounted() {
    this.deviceTypeData = null;
    this.handlePage();
    // this.dateChange()
    // 单页面背景色
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#F3F4F9");
  },
  beforeDestroy() {
    // 单页面背景色
    document.querySelector("body").removeAttribute("style");
  },

  methods: {
    // 显示筛选窗
    openScrenn() {
      this.lgNum = this.screen ? 8 : 6;
      this.screenShow = this.screen;
    },
    // 跳转详情
    ToDeviceTypeDetails(token) {
      this.$router.push({
        path: "/devicetypedetails",
        query: { deviceTypeToken: token }
      });
      // console.log("跳转", token);
    },
    // 打开弹窗
    openadd() {
      this.adddevicetype = true;
    },
    showAdd(data) {
      if (data === "false") {
        this.adddevicetype = false;
      } else {
        this.adddevicetype = true;
      }

      this.handlePage();
    },
    // 获取列表与分页组件
    handlePage() {
      console.log("this.dateArr :>> ", this.dateArr);
      var that = this;
      that.loading = true;
      that.params = {
        includeDeviceType: true,
        includeAssignment: true,
        excludeAssigned: false,
        page: that.pageNum,
        pageSize: that.pageSize,
        startDate: this.dateArr.length ? this.dateArr[0] : "",
        endDate: this.dateArr.length ? this.dateArr[1] : "",
        deviceTypeName: that.searchname,
        deviceTypeToken: that.searchtoken
      };
      getDeviceTypesV2(that.params)
        .then(res => {
          that.total = res.data.numResults;
          // 获取列表数据
          that.deviceTypeData = res.data.results;
          if (
            that.searchname != "" ||
            that.searchtoken != "" ||
            that.startDate != "" ||
            that.endDate != ""
          ) {
            that.switchTextColor = "#2680D2";
            that.switchText = "显示筛选 ( 已筛选 )";
          } else {
            that.switchTextColor = "#666666";
            that.switchText = "显示筛选";
          }
        })
        .finally(f => {
          this.loading = false;
        });
    },
    submitBut() {
      this.handlePage();
    },
    // 分页回调
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      this.handlePage();
    },
    // 重置
    reSet() {
      this.searchtype = "";
      this.searchname = "";
      this.searchtoken = "";
      this.startDate = "";
      this.endDate = "";
      this.dateArr = [];
      this.handlePage();
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/mixin.scss";
.list-box {
  width: 100%;
  background-color: #fff;
}
.display_search {
  display: flex;
}
.box-left {
  width: 100%;
  background-color: #fff;
  padding: 20px;
  padding-bottom: 0;
  /* height: calc(100vh - 150px - 46px) !important ; */
  /* overflow-y: auto; */
}
</style>
